<template>
    <div class="partnerList">
        <div class="partnerList_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">装饰公司列表<i class="el-icon-close"></i></div>
		</div>
        <div class="partnerList_bottom">
            <div class="partnerList_bottom_new">
				<div class="partnerList_bottom_new_goods">
					<div class="partnerList_bottom_new_goods_btn">
						<!-- <button @click="handerNewShop"><i class="el-icon-trophy"></i>新增装饰公司</button> -->
					</div>
					<div class="partnerList_bottom_new_goods_screening">
						<div class="partnerList_bottom_new_goods_screening_right">
							<el-input v-model="input" placeholder="请输入"></el-input>
							<button @click="handerSeach"><i class="el-icon-search"></i>搜索</button>
						</div>
					</div>
				</div>
			</div>
            <div class="partnerList_table">
                <div class="partnerList_bottom_table">
					<table>
						<tr>
							<th></th>
							<th>序号</th>
                            <th class="avaImg">头像</th>
							<th>姓名</th>
							<th>联系电话</th>
                            <th>从事年限</th>
                            <th>设计风格</th>
							<th>服务类型</th>
							<th>起始报价</th>
							<th>结尾报价</th>
							<th>创建时间</th>
							<th>状态</th>
							<th>操作</th>
						</tr>
						<tr v-for="(v,i) in tableList" :key="i">
							<td>
								<font class="checkbox" :class="{'check_active' : checkBoxAll.includes(i)}" @click="handlerCheckbox(i)"><i class="el-icon-check"></i></font>
							</td>
							<td>{{v.id}}</td>
							<td class="avaImg">
								<div class="avatarImg" v-if="v.avatar != null">
									<img :src="v.avatar.path">
								</div>
							</td>
							<td>{{v.name}}</td>
							<td>{{v.phone}}</td>
							<td>{{v.employ_year}}</td>
							<td>
								<div class="tag">
									<el-tag size="mini" v-for="(item,index) in v.design_style" :key="index">{{item.name}}</el-tag>
								</div>
							</td>
							<td>
								<div class="tag">
									<el-tag size="small" v-for="(item,index) in v.service_type" :key="index">{{item.name}}</el-tag>
								</div>
							</td>
							<td>{{v.start_offer}}</td>
                            <td>{{v.end_offer}}</td>
                            <td>
								<div v-if="v.create_time!=null">
									{{$moment(v.create_time*1000).format('YYYY-MM-DD')}}
								</div>
							</td>
                            <td>{{v.status==0?'禁用':'正常'}}</td>
							<td>
								<button class="editor" @click="toDetail(v.id)">详情</button>
								<button class="shelves" :class="{'delete':v.status==0}" @click="shelves(v.id,v.status)">{{v.status==0?'启用':'禁用'}}</button>
							</td>
						</tr>
						<tr v-if="tableList.length == 0"><td class="table_title" colspan="10">当前数据空空如也</td></tr>
					</table>
					<div class="partnerList_bottom_page">
						<div class="partnerList_bottom_page_left">
							<div class="partnerList_bottom_page_left_checkAll" @click="handerCheckAll">
								<font class="checkbox" :class="{'check_active' : checkAll}"><i class="el-icon-check"></i></font>
							</div>全选
							<!-- <button class="partnerList_bottom_page_left_btn" @click="selectDel">删除</button> -->
						</div>
						<div class="partnerList_bottom_page_right">
							<el-pagination
								@size-change="handleSizeChange"
								@current-change="handleCurrentChange"
								:current-page="page"
								:page-sizes="[10, 20, 30, 40]"
								:page-size="pageSize"
								layout="total, sizes, prev, pager, next, jumper"
								:total="total"
								background>
							</el-pagination>
						</div>
					</div>
				</div>
            </div>
        </div>
        
    </div>
</template>

<script>
export default {
    data(){
        return{
            cateList:[],
            cate:{},
             input: '',
			checkAll:false,
			page:1,
			pageSize:10,
			total:0,
            checkBoxAll:[],				// 选中的数据
			shelvesAlls:[],
            tableList:[]
        }
    },
	mounted(){
		this.getDesigList()
	},

    methods:{

		// 获取设计师列表
		getDesigList(keyword=''){
			this.$http.post('/api/root/designer/index',{page:this.page,pagesize:this.pageSize,keyword,identity:1}).then(res=>{
				console.log(res);
				if(res.code==1){
					this.tableList = res.data.list?res.data.list:[];
					this.total = res.data.total
				}
			})
		},

		//点击详情
		toDetail(id){
			console.log(id);
			this.$router.push({name:'decorationDetail',query:{id}})
		},

        //新增合作商按钮
        handerNewShop(){
			this.$router.push({path:'/newDecoration'})
		},
        
        // 类型
        handerChange(){},
        
        // 搜索
        handerSeach(){
			this.getDesigList(this.input)
		},

        // 禁用或启用
        shelves(id,status){
			console.log(status);
			let sta = status==1?0:1;
			this.$http.post('/api/root/designer/changeStatus',{id,status:sta}).then(res=>{
				if(res.code==1){
					this.getDesigList();
					this.$message({
						type:'success',
						message:'操作成功'
					})
				}
			})
		},

        // 下架
        toDonw(){},
        
         
          // 多选
			handlerCheckbox(i){
                console.log(i);
				let arr = this.checkBoxAll;
				if(arr.includes(i)){
					let index = arr.indexOf(i);
					if(index != -1){
						arr.splice(index,1);
						this.shelvesAlls.splice(index,1);
						if(this.checkBoxAll.length !== this.tableList.length) {
							this.checkAll = false;
						}
					}
				}else {
					this.checkBoxAll.push(i);
					this.shelvesAlls.push(this.tableList[i].id);
					if(this.checkBoxAll.length == this.tableList.length) {
						this.checkAll = true;
					}
				};
				console.log(this.shelvesAlls);
			},
            // 全选与全不选
			handerCheckAll(){
				this.checkAll = !this.checkAll;
				let arr = this.tableList.length;
				this.checkBoxAll = [];
				this.shelvesAlls = [];
				if(this.checkAll){
					for(let i=0;i<arr;i++){
						this.checkBoxAll.push(i);
					}
					this.checkBoxAll.map(v => {
					this.shelvesAlls.push(this.tableList[v].id.toString());;
				})
				}else {
					this.checkBoxAll = [];
					this.shelvesAlls = []
				}
				console.log(this.shelvesAlls);
			},

            // // 全选后的删除
            // selectDel(){
			// 	console.log(this.shelvesAlls);
			// 	let res =[...new Set(this.shelvesAlls)]; //去重
			// 	console.log(res);
			// 	let str = res.join(',');
			// 	if(this.shelvesAlls.length){
			// 		this.$confirm('此操作将删除选中项, 是否继续?', '提示', {
			// 			confirmButtonText: '确定',
			// 			cancelButtonText: '取消',
			// 			type: 'warning'
			// 		}).then(()=>{
			// 			this.$http.post('/api/root/designer/del',{id:str}).then(res=>{
			// 				console.log(res);
			// 				if(res.code==1){
			// 					this.getDesigList();
			// 					this.checkAll=false;
			// 					this.checkBoxAll=[];
			// 					this.shelvesAlls=[];
			// 					this.$message({
			// 						type:'success',
			// 						message:'删除成功'
			// 					})
			// 				}
			// 			})
			// 		})
			// 	}else{
			// 		this.$message({
			// 			type:'info',
			// 			message:'请选择要删除的项'
			// 		})
			// 	}
			// },
			

        	handleSizeChange(val) {
				this.pageSize = val;
				this.getDesigList()
			},
			handleCurrentChange(val) {
			    this.page = val;
				this.getDesigList()
			},
    }
}
</script>

<style lang="less" scoped>
@import 'decorationList.less';
</style>
